# Tutorial de Javascript, DOM, APIs y ECMAScript8.

+ Javascript y ECMAScript8
+ Manipulando el DOM
+ APIs Web del lado del cliente.
+ Otras cosas importantes.

Nota: Toda la información se obtuvo de [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/JavaScript), se tradujo al español y se organizó para ayudar a aprender haciendo.

## Javascript and ECMAScript8

## Manipulando el DOM

Cuando se escriben páginas web y applicaciones, una de las cosas mas comunes que querras hacer es manipular la estructura del documento de alguna manera. Esto usualmente se hace usando el Modelo de Objetos del Documento (DOM), un conjunto de Interfaces de Programación de Aplicaciones (APIs) para controlar el HTML y la información de estilo que hace uso frecuente del objeto [Documento](https://developer.mozilla.org/en-US/docs/Web/API/Document).

Nota: Para cualquier duda sobre HTML y CSS visitar [HTML5](https://notabug.org/RatRiot/doc/src/641a89adec5e28decad0203a82d5b7d933b67dd3/HTML5.md)

### Partes Importantes de un navegador

Los navegadores son piezas complicadas de software con muchas partes moviendose, muchas de las cuales no pueden controlarse o manipularse por un desarrollador web utilizando Javascript. Podrías pensar que esas limitaciones son algo malo, pero los navegadores están bloqueados por buenas rasones, la mayoría centrada en la seguridad. Imagina si un sitio web pudiera obtener acceso a tus contraseñas u otra información sensible, y utilizar esta información para acceder a sitios como si fueras tu.

A pesar de las limitaciones, las APIs Web nos dan acceso a mucha funcionalidad que nos capacita para hacer muchas cosas con páginas web. Hay algunas piezas obvias a las cuales harás referencia regularmente en tu código -- considera el siguiente diagrama, el cual representa las partes principales de un navegador directamente involucradas en observar páginas web:

-----------------------------------

![Partes de un navegador: ventana, applicacion el documento.](https://mdn.mozillademos.org/files/14557/document-window-navigator.png "Representación de un navegador y sus componentes principales.")

-----------------------------------

+ La ventana es la pestaña del navegador en la cual la página es cargada; esto se representa en JavaScript por el objeto [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window). Usando los metodos disponibles en este objeto puedes hacer cosas como retornar el tamaño de la ventana (ver [Window.innerWidth](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth) y [Window.innerHeight](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight) ), manipular el documento cargado en esa ventana, guardar datos especificos a ese documento en el lado del cliente (por ejemplo utilizando una base de datos local u otro mecanismo de almacenamiento), adjuntar un controlador de eventos a la ventana actual, y mas.
+ El navegador representa el estado y la identidad del programa navegador (por ejemplo el user-agent) tal y como existe en la web. En JavaScript, esto se representa por el objeto [Navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator). Puedes usar este objeto para recuperar cosas como el lenguaje preferido del usuario, un flujo de medios de la cámara web del usuario, etcétera.
+ El documento (representado por el DOM en los navegadores) es la página real cargada en la ventana, y se representa en JavaScript con el objeto [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document). Puedes usar este objeto para retornar y manipular información en el HTML y CSS que comprenden el documento, por ejemplo obtener una referencia a un elemento en el DOM, cambiar su contenido de texto, aplicarle nuevos estilos, crear nuevos elementos y agregarlos al elemento actual como hijos, o incluso eliminarlo todo junto.

En este articulo nos enfocaremos mayoritariamente en manipular el documento, pero además mostraremos algunos otros fragmentos útiles.

### El Modelo de Objetos del Documento

El documento actualmente cargado en cada una de las pestañas de tu navegador está representado por un modelo de objetos del documento. Este es una representación en "estructura árbol" creada por el navegador, que habilita a la estructura HTML para ser fácilmente accesada por lenguages de programación - por ejemplo, el navegador mismo lo utiliza para aplicar estilos y otra información a los elementos correctos conforme dibuja la página, y desarrolladores como tú pueden manipular el DOM con JavaScript después que la página ha sido dibujada.

Hemos creado una simple página de ejemplo en [dom-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html) ([ver en vivo](http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html)). Intenta abrir esto en tu navegador -es una página muy simple que contiene dentro un elemento [<section>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) dentro del cual puedes encontrar una imagen, y un parrafo con un vínculo dentro. El código HTML se ve así:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple DOM example</title>
  </head>
  <body>
      <section>
        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
      </section>
  </body>
</html>
```

El DOM por otro lado se ve así:

![Image not available](https://mdn.mozillademos.org/files/14559/dom-screenshot.png)

Nota: Este diagrama de arbol del DOM se creó usando el [Visor de DOM en vivo](https://software.hixie.ch/utilities/js/live-dom-viewer/).

Puedes ver aquí que cada elemento y cada fragmento de texto en el documento tiene su propio rubro en el árbol -cada uno se llama nodo. También encontrarás varios términos usados para describir el tipo de nodo, y su posición en el árbol en relación del uno con el otro:

*__Nodo elemento__: Un elemento, tal como existe en el DOM.
*__Nodo raíz__: Nodo superior del árbol, el cuál en el caso de HTML es siempre el nodo `HTML` (otros lenguajes de marcado como SVG y XML personalizado tendrán diferentes elementos raíz).
*__Nodo híjo__: Un nodo directamente dentro de otro. Por ejemplo, `IMG` es un híjo de `SECTION` en el ejemplo anterior. 
*__Nodo descendiente__: Un nodo _en cualquier lugar_ dentro de otro nodo. Por ejemplo, `IMG` es un hijo de `SECTION` en el ejemplo anterior, y también es un descendiente. `IMG` no es un hijo de `BODY`, ya que está dos niveles abajo en el árbol, pero es un descendiente de `BODY`.
*__Nodo padre__: Un nodo el cual tiene a otro dentro. Por ejemplo, `BODY` es el nodo padre de `SECTION` en el ejemplo anterior.
*__Nodos hermanos__: Nodos que descansan en el mismo nivel del árbol DOM. Por ejemplo, `IMG` y `P` son hermanos en el ejemplo anterior.
*__Nodo texto__: Un nodo que contiene una cadena de texto.

Es útil familiarizarse con esta terminología antes de trabajar con el DOM, ya que un buen número de términos en código que te toparás harán uso de ellos. Puedes también haberte topado con ellos si has estudiado CSS(e.g. selector descendiente, selector hijo).

### Aprendizaje activo: Manipulación básica del DOM

Para comenzar a aprender acerca de manipular el DOM, comenzemos con un ejemplo práctico.

1. Toma una copia local de la [página dom-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html) y la [imágen](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png) que la acompaña.
2. Agrega un elemento `<script></script>` justo arriba de la etiqueta `</body>` que cierra.
3. Para manipular un elemento dentro de DOM, primero necesitas seleccionarlo y guardar una referencia a el dentro de una variable. Dentro de tu elemento `<script>`, agrega la siguiente linea:
	```javascript
	var link = document.querySelector('a');
	```
4. Ahora tenemos la referencia al elemento guardado en una variable, podemos comenzar a manipularlo usando propiedades y métodos disponibles a el (estas estan definidas en interfaces como [HTMLAnchorElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement) en el caso del elemento [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), su interfaz padre mas general [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement), y [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) - el cuál representa a todos los nodos en un DOM). Primero que todo, cambiemos el texto dentro del vínculo actualizando el valor de la propiedad [Node.textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Agrega la siguiente linea debajo de la anterior:
	```javascript
	link.textContent = 'Mozilla Developer Network';
	```
5. También deberíamos cambiar la URL a la cual el vínculo está apuntando, de tal manera que no se dirija al lugar erroneo cuando se haga click en el. Agrega la siguiente linea, de nuevo al final.
	```javascript
	link.href = 'https://developer.mozilla.org';
	```
Notese que, como muchas cosas en JavaScript, hay muchas maneras de seleccionar un elemento y guardar una referencia a el en una variable. [Document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) es el enfoque moderno recomendado, lo cual es conveniente po que te permite seleccionar elementos usando selectores CSS. La llamada a `querySelector()` de arriba, coincidirá con el primer elemento [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) que aparece en el documento. Si querías hacer coincidir y hacer cosas a multiples elementos, podrías usar [Document.querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), el cual coincide con cada elemento en el documento que sea igual al selector, y guarda referencias a ellos en un objeto parecido a un arreglo llamado NodeList.

Hay métodos mas obsoletos disponibles para obtener referencias a elementos, como estos:

* [Document.getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById), el cual selecciona un elemento con un valor dado al atributo `id`, por ejemplo, `<p id="myId">My Paragraph</p>`. El ID se pasa a la función como parámetro, por ejemplo, `var elementRef = document.getElementById('myId')`.
* [Document.getElementByTagName()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName), el cuál retorna un arreglo con todos los elementos de la página de un tipo dado, por ejemplo `<p>` y `<a>`, etcétera. El tipo del elemento se pasa a la función como parámetro, por elemplo, `var elementRefArray = document.getElementByTagName('p')`.

Estos métodos se utilizan más en navegadores obsoletos que con métodos modernos como `querySelector()`, pero no son tan convenientes. Dale una mirada para ver que otros puedes encontrar.

#### Creando y colocando nuevos nodos



## APIs Web del lado del cliente.



## Otras cosas importantes.



